@(input: String)(implicit session: Session)
    @config.main("Search") {

        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("config/allSearch.css")">


        <style>

                .search-form {
                    display: flex;
                    justify-content: center;
                    margin-top: 20px;
                }

                table div {
                    word-break: break-all;
                    white-space: normal !important;
                }

            .table{
                white-space: unset!important;
            }


        </style>

        <div class="body-box">
            <div class="page-box">

                @config.subTitle("Search")

                <div class="main-body">

                    <form class="registration-form form-horizontal search-form" id="form"
                    accept-charset="UTF-8" method="get" action="/COADB/all/searchPage">

                        <input type="text" class="form-control" name="input" style="height: 40px;
                            width: 80%;
                            float: left" placeholder="Keyword" id="input">

                        <button style="
                            background-color: transparent;
                            border: transparent;
                            margin-top: 4px;
                            margin-left: -35px;
                        " type="submit">
                            <i class="fa fa-search" style="font-size: 20px"></i>
                        </button>


                    </form>
                    <span style=" margin-left: 11%;
                        text-align: left
                    ">
                        e.g.,&nbsp;<a href="#" onclick="showExample()" class="resLink"><em id="egQuery">
                        example</em></a></span>

                    <div id="result" class="search-result">
                        <hr/>

                        <h3><b>Keyword : </b><span>@input</span></h3>


                        <table id="table" class="table table-search" data-pagination="true" data-page-list="[5, 10]"
                        data-page-size="5"
                        style="margin-top: 20px"></table>
                    </div>

                </div>
            </div>
        </div>


        <script>


                $(function () {
                    $('#table').bootstrapTable({
                        method: 'post',
                        url: "@routes.AllSearchController.searchByDbInput(input)",
                        sidePagination: "server",
                        pageNumber: 1,
                        pagination: true,
                        pageList: [5, 10],
                        pageSize: 5,
                        contentType: "application/x-www-form-urlencoded",
                        showHeader: false,
                        columns: [{
                            field: "result",
                            formatter: function (value, row, index) {
                                let genelink = "/COADB/browse/genePage/" + row.id;
                                let genomelink = "/COADB/browse/genomePage/" + row.speciesId;

                                const main = "<div class='result-border'><a href='" + genelink + "' target='_blank'>" + row.geneid + "</a>" +
                                        "<a href='" + genomelink + "' target='_blank'><span class='type-right'>" +
                                        "&nbsp;" + row.species + "&nbsp;</span></a><hr>";
                                let option = "";
                                $.each(row.result, function (i, v) {
                                    option += "<div style='display: flex;font-size: 14px'><div style='width: 15%;text-align: right'> <b>" + v.option + " ：</b></div><div style='width: 80%'> " + v.result + "</div> </div>";
                                });

                                return main + option + "</div>";
                            }
                        }]
                    });


                })

                function showExample() {
                    $("#input").val("ko03021 NAM")
                }

                function showBlock(id) {
                    let v = $("#btn" + id).text();
                    if (v === "Show") {
                        $("#btn" + id).text("Hide");
                        $("#block" + id).show();
                    } else {
                        $("#btn" + id).text("Show");
                        $("#block" + id).hide();
                    }
                }


        </script>

    }